<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>开门大吉</title>
		<style>
		section {
			width: 440px;
			height: 300px;
			border: 1px solid #000;
			margin: 100px auto;
			background: url(image/timg.jpg)  no-repeat;
			position: relative;
			perspective: 1000px;  /*2D变3D  给父盒子添加透视效果*/
			background-size: cover;
		}
		.door-l,.door-r {
			position: absolute;
			top: 0;
			width: 50%;
			height: 100%;
			background:  url(image/f.jpg);
			transition: all 1s;   /*两个门都做过渡*/
		}
		.door-l {
			left: 0;
			border-right: 1px solid #000;
			transform-origin: left;  /*设置旋转中心点 左侧盒子按左侧翻转*/
		}
		.door-r {
			right: 0;
			border-left: 1px solid #000;
			transform-origin: right;
		}
		.door-l::before,
		.door-r::before {
			content: "";
			position: absolute;
			top: 50%;
			width: 20px;
			height: 20px;
			border: 1px solid #000;
			border-radius: 50%;
			transform: translateY(-50%);   /*走自己高度的一半*/
		}
 		.door-l::before {
			right: 5px;
		}
		.door-r::before {
			left: 5px;
		}
		/*鼠标经过section盒子 两个门 盒子翻转 rotateY*/
		section:hover .door-l {
			transform: rotateY(-130deg);
		}
			section:hover .door-r {
			transform: rotateY(130deg);
		}
	   	</style>
</head>
<body>
	<section>
	<div class="door-l"> </div>
	<div class="door-r"> </div>
	</section>
</body>
</html>